<template>
<!--  -->
<!-- 图标选择 -->
<!--  -->
    <span :style="{ width: width + 'px', height: width + 'px' }" class="icon">
        <img :src="getImage()" :style="{ 'object-fit': fit }" />
    </span>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
    fileType: {
        type: Number,   //文件类型
    },
    iconName: {
        type: String,   //图标名称
    },
    cover: {
        type: String,   //文件封面
    },
    width: {
        type: Number,
        default: "cover",
    },
});

//定义各类型文件的封面
const fileTypeMap = {
    0: { desc: "目录", icon: "folder" },
    1: { desc: "视频", icon: "video" },
    2: { desc: "音频", icon: "music" },
    3: { desc: "图片", icon: "image" },
    4: { desc: "exe", icon: "pdf" },
    5: { desc: "doc", icon: "word" },
    6: { desc: "excel", icon: "excel" },
    7: { desc: "纯文本", icon: "txt" },
    8: { desc: "程序", icon: "code" },
    9: { desc: "压缩包", icon: "zip" },
    10: { desc: "其它文件", icon: "others" },
}

//选择图标
const getImage = () => {
    //判断是否传递封面 -- 图片、视频
    if (props.cover) {
        return proxy.globalInfo.imageUrl + props.cover;  //请求封面
    }

    let icon = "unknow_icon";          //默认图标
    //判断是否传递图标名称 -- 下载时的暂停、继续、取消等
    if (props.iconName) {
        icon = props.iconName;         //选择对应名称的图标
    } else {
        const iconMap = fileTypeMap[props.fileType];   //根据文件类型匹配图标
        if (iconMap != undefined) {
            icon = iconMap["icon"];
        }
    }
    return new URL(`/src/assets/icon-image/${icon}.png`, import.meta.url).href;
};

</script>

<style lang="scss" scoped>
.icon {
    text-align: center;
    display: inline-block;
    border-radius: 3px;
    overflow: hidden;    //当图片超出容器大小时，会裁剪
    img {
        width: 50%;
        height: 50%;
    }
}
</style>
